<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="../../resources/css/bootstrap/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="../../resources/css/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
    <form action="" class="form-horizontal"  role="form">
        <div class="form-group">
            <label for="dtp_input4" class="col-md-2 control-label">简易</label>
            <div class="input-group date form_datetime-esay col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                <input class="form-control" size="16" type="text" value="" readonly>
                <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
            </div>
            <input type="hidden" id="dtp_input4" value="" /><br/>
        </div>
        <div class="form-group">
            <label for="dtp_input1" class="col-md-2 control-label">年月日时分</label>
            <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                <input class="form-control" size="16" type="text" value="" readonly>
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
            </div>
            <input type="hidden" id="dtp_input1" value="" /><br/>
        </div>
        <div class="form-group">
            <label for="dtp_input2" class="col-md-2 control-label">年月日</label>
            <div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                <input class="form-control" size="16" type="text" value="" readonly>
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
            </div>
            <input type="hidden" id="dtp_input2" value="" /><br/>
        </div>
        <div class="form-group">
            <label for="dtp_input3" class="col-md-2 control-label">北京时间</label>
            <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
                <input class="form-control" size="16" type="text" value="" readonly>
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
            </div>
            <input type="hidden" id="dtp_input3" value="" /><br/>
        </div>
        <div class="form-group col-md-6">
            <label for="dtp_input5" class="col-md-3 control-label">开始时间</label>
            <div class="input-group date starttime col-md-5" >
                <input class="form-control" size="16" type="text" value="" readonly>
                <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
            </div>
            <input type="hidden" id="dtp_input5" value="" /><br/>
        </div>
        <div class="form-group col-md-6">
            <label for="dtp_input6" class="col-md-3 control-label">结束时间</label>
            <div class="input-group date endtime col-md-5" >
                <input class="form-control" size="16" type="text" value="" readonly>
                <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
            </div>
            <input type="hidden" id="dtp_input6" value="" /><br/>
        </div>
    </form>
</div>

<script type="text/javascript" src="../../resources/js/jquery-2.1.1.js" charset="UTF-8"></script>
<script type="text/javascript" src="../../resources/js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="../../resources/js/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../../resources/js/plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
    $(".form_datetime-esay").datetimepicker({
        language:'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        format: "dd MM yyyy - hh:ii"
    });
    $('.form_datetime').datetimepicker({
        language:'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        format: "yyyy"+'年'+" MM dd"+'日'+" hh:ii"
    });
    $('.form_date').datetimepicker({
        language:'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
        format: "yyyy"+'年'+" mm dd"+'日'
    });
    $('.form_time').datetimepicker({
        language:'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 0,
        format: "hh:ii"
    });
    $(".starttime").datetimepicker({
        language:'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
        showMeridian:true,
        pickDate:true,
        format: "yyyy-mm-dd"
    }).on('changeDate',function(ev){
        var starttime=$('.starttime input').val();
        console.log(starttime)
        $('.endtime').datetimepicker('setStartDate',starttime);
        $('.starttime').datetimepicker('hide');
    });
    $('.endtime').datetimepicker({
        language:'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
        format: "yyyy"+'-'+"mm"+'-'+"dd"
    }).on('changeDate',function(ev){
        var starttime=$('.starttime').val();
        var endtime=$('.endtime').val();
        if(starttime!=null&&endtime!=null){
            if(!checkEndTime(starttime,endtime)){
                $('.endtime').val('');
                alert('开始时间大于结束时间')
                return
            }
        }
        $('.starttime').datetimepicker('setEndDate',endtime);
        $('.starttime').datetimepicker('hide');
    });
    $('.starttime').datetimepicker('setEndDate',getCurentTime());
    $('.endtime').datetimepicker('setStartDate',getCurentTime());

    $('.starttime').val(getCurentTime())
    $('.endtime').val(getCurentTime());
    function checkEndTime(startTime, endTime) {
        var start = new Date(startTime.replace("-", "/").replace("-", "/"));
        var end = new Date(endTime.replace("-", "/").replace("-", "/"));
        if (end < start) {
            return false;
        }
        return true;
    }
    function getCurentTime() {
        var now = new Date();

        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var day = now.getDate();

        var hh = now.getHours();
        var mm = now.getMinutes();
        var ss = now.getSeconds();

        var clock = year + "-";

        if (month < 10)
            clock += "0";

        clock += month + "-";

        if (day < 10)
            clock += "0";

        clock += day + " ";

        if (hh < 10)
            clock += "0";

        clock += hh + ":";
        if (mm < 10)
            clock += '0';
        clock += mm + ":";
        if (ss < 10)
            clock += '0';
        clock += ss ;
        return (clock);
    }
</script>

</body>
</html>
